Vue 3 引入了一個強大的新功能——Composition API，這是 Vue 3 其中一個最令人矚目的改變。相比於 Vue 2 的 Options API，Composition API 提供了更靈活、可組合性更強的方式來管理組件的邏輯和狀態，特別是在大型應用中，這種變革尤為重要。

Composition API 是什麼？

Composition API 是一組基於函數的 API，它允許你將組件的邏輯按功能組合成單個函數並在組件中重複使用。這與 Vue 2 中的 Options API（如 data、methods、computed 等）不同，Composition API 通過簡單的函數來管理狀態和行為。

最核心的組成部分包括 setup 函數，這是每個 Vue 3 組件中使用 Composition API 的起點。

為什麼選擇 Composition API？

• 更好的代碼組織：隨著組件變得更大，Options API 會讓代碼分散在各個部分（methods、computed、data 等），而 Composition API 允許你根據功能將相關邏輯封裝在一起。
• 代碼重用性：使用 Composition API 可以輕鬆地提取和重用邏輯，通過創建“組合函數”來共享邏輯，避免了 mixins 的潛在問題（如命名衝突）。
• 支持 TypeScript：Composition API 在 TypeScript 支持方面有顯著提升，讓你能夠在 Vue 3 中更好地使用 TypeScript。

使用 Composition API 的基本步驟

1.setup 函數
setup 函數是 Composition API 的核心，它是在組件創建之前調用的。組件中的數據、方法、計算屬性和監聽器都可以在這裡定義。

<script setup>
import { ref } from 'vue';

const message = ref('Hello World');

function updateMessage() {
  message.value = 'Hello Vue 3 with Composition API';
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

2.響應式數據

在 Composition API 中，使用 ref 和 reactive 創建響應式數據。ref 用於處理基本數據類型，而 reactive 用於處理對象。

• ref 會包裝數據，並使用 .value 訪問其值。
• reactive 則是直接操作對象，無需 .value。

3.計算屬性
Composition API 使用 computed 函數來創建計算屬性，這與 Vue 2 中的 computed 屬性一致，但寫法更為靈活。

import { computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

Composition API 讓我們能夠更靈活地構建 Vue 組件，提供了更強大的組合能力和更好的可維護性。對於大型應用和 TypeScript 用戶來說，Composition API 是非常有價值的改進。